<template>
    <div>
        <button class="createButton">
            <div class="svg-wrapper-1">
              <div class="svg-wrapper">
                <PlusCircleOutlined class="svg"/>
              </div>
            </div>
            <span>{{$t('header.Createtask')}}</span>
          </button>
    </div>
  </template>
  
  <script setup>
  import {
    Table,
  } from 'ant-design-vue';
  import { ref, reactive } from 'vue';
  import {

  PlusCircleOutlined,

} from "@ant-design/icons-vue";
  defineOptions({
    name: 'Demo',
  });
  
  </script>
  
  <style lang="scss" scoped>
  .createButton {
    font-family: inherit;
    font-size: 14px;
    background: #1677ff;
    color: white;
    padding: 0.3rem 1.1rem;
    padding-left: 0.9em;
    display: flex;
    align-items: center;
    border: none;
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.2s;
    cursor: pointer;
  }
  
  .createButton span {
    display: block;
    margin-left: 0.3em;
    transition: all 0.3s ease-in-out;
  }
  
  .createButton .svg {
    display: block;
    transform-origin: center center;
    transition: transform 0.3s ease-in-out;
  }
  
  .createButton:hover .svg-wrapper {
    animation: fly-1 0.6s ease-in-out infinite alternate;
  }
  
  .createButton:hover .svg {
    transform: translateX(2.2em) rotate(90deg) scale(1.1);
  }
  
  .createButton:hover span {
    transform: translateX(7rem);
  }
  
  .createButton:active {
    transform: scale(0.95);
  }
  
  @keyframes fly-1 {
    from {
      transform: translateY(0.1em);
    }
  
    to {
      transform: translateY(-0.1em);
    }
  }
  </style>